<template>
  <el-card class="global-card">
    <template #header>
      <div class="card-header">
        <span>商品分类</span>
        <el-button type="primary" :icon="Plus" @click="handleClickAdd"
          >添加</el-button
        >
      </div>
    </template>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      highlight-current-row
    >
      <el-table-column prop="title" label="分类名称" />
      <el-table-column prop="cover" label="封面图" />
      <el-table-column label="是否展示">
        <template #default="scope">
          <el-switch
            v-model="scope.row.state"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :loading="loadOpts.submit"
            :before-change="handleToggleSwitch.bind(null, scope.row, 'state')"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="144">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            link
            :icon="Edit"
            @click="handleClickRowEdit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="是否删除此数据?"
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="red"
            :hide-after="0"
            @confirm="handleClickRowDel(scope.row.id)"
          >
            <template #reference>
              <el-button size="small" type="primary" link :icon="Delete"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <DrawerForm
    v-model="drawerOpts.visible"
    :title="drawerOpts.title"
    :size="drawerOpts.size"
    :is-edit="drawerOpts.isEdit"
    :row-data="drawerOpts.data"
    @on-refresh="updateCategoryTree"
  />
</template>

<script setup lang="ts">
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue';
import { reactive } from 'vue';
import { deleteGoodsCategory, updateSwitch } from '@/apis/goods-category';
import DrawerForm from './form.vue';
import { ElMessage } from 'element-plus';
import { InitDrawerOpts, InitLoadOpts } from '@/utils/common';

import { useCategoryStore } from '@/stores/category';
const categoryStore = useCategoryStore();
const { getCategoryTree, updateCategoryTree } = categoryStore;

// 从store中获取
const tableData = getCategoryTree();

// 加载状态
const loadOpts = reactive(InitLoadOpts());

// 抽屉
const drawerOpts = reactive(
  InitDrawerOpts<API.goodsCategory.EntitySchema | any>()
);

// 切换状态
const handleToggleSwitch = async (
  item: API.goodsCategory.EntitySchema,
  field: keyof API.goodsCategory.EntitySchema
): Promise<any> => {
  loadOpts.submit = true;
  try {
    const res = await updateSwitch(item.id!, {
      [field]: +!item[field]
    });
    loadOpts.submit = false;
    ElMessage.success(res.message);
    return Promise.resolve(true);
  } catch (err: any) {
    loadOpts.submit = false;
    return Promise.reject(new Error('Error'));
  }
};

// 添加
const handleClickAdd = () => {
  drawerOpts.title = '添加';
  drawerOpts.isEdit = false;
  drawerOpts.data = {};
  drawerOpts.visible = !drawerOpts.visible;
};

// 编辑
const handleClickRowEdit = (row: API.goodsCategory.TreeSchema) => {
  drawerOpts.title = '编辑';
  drawerOpts.isEdit = true;
  const { children, ...otherOpts } = row;
  drawerOpts.data = otherOpts;
  drawerOpts.visible = !drawerOpts.visible;
};

// 删除
const handleClickRowDel = (id: number) => {
  if (loadOpts.submit) return;
  loadOpts.submit = true;

  deleteGoodsCategory(id)
    .then((res) => {
      loadOpts.submit = false;
      ElMessage.success(res.message);
      // 重新刷新数据
      updateCategoryTree();
    })
    .catch(() => {
      loadOpts.submit = false;
    });
};
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
